<template>
  <view>
    <view
      class="tab_bar"
      :style="{
        bottom: bottom,
        background: bgColor,
      }"
      :class="{
        gaussian: gaussian,
      }"
    >
      <view
        class="tab_bar_item"
        hover-class="hover_bar"
        v-for="(i, k) in tabs"
        :key="k"
        @click="handleChange(i, k)"
      >
        <uv-badge
          absolute
          :show="i.num > 0"
          :value="i.num"
          type="error"
          :max="99"
          :offset="[0, 12]"
          style="z-index: 9"
        >
        </uv-badge>
        <uv-icon
          :name="active == k ? i.activeIcon : i.icon"
          :size="size"
          :label="i.label"
          label-pos="bottom"
          label-size="24rpx"
          space="12rpx"
          :label-color="active == k ? activeColor : labelColor"
        />
      </view>
    </view>
    <view v-if="occupy" class="tab_bar_occupy" :style="{ padding: `${bottom} 0` }" />
  </view>
</template>

<script setup>
const props = defineProps({
  /**
   * tab数据
   * @label 菜单名称
   * @icon 图标
   * @path 组件路径
   * @num 显示的数字
   */
  tabs: {
    type: Array,
    default: () => [],
  },
  // 选中的tab
  active: {
    type: [String, Number],
    default: 0
  },
  // 选中颜色
  activeColor: {
    type: String,
    default: "#4EA770",
  },
  // 图标颜色
  color: {
    type: String,
    default: "#212121",
  },
  // 图标尺寸
  size: {
    type: [String, Number],
    default: "24",
  },
  // 文字颜色
  labelColor: {
    type: String,
    default: "#999999",
  },
  // 底部距离
  bottom: {
    type: String,
    default: "20px",
  },
  // 背景颜色
  bgColor: {
    type: String,
    default: "#fff",
  },
  // 是否高斯模糊
  gaussian: {
    type: Boolean,
    default: false,
  },
  // 是否占位
  occupy: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["change", "update:active"]);

// 切换组件
const handleChange = (i, index) => {
  emit("update:active", index);
  emit("change", {
    ...i,
    index,
  });
};
</script>

<style lang="scss" scoped>
.tab_bar {
  position: fixed;
  left: 20px;
  right: 20px;
  height: 60px;
  border-radius: 30px;
  box-shadow: 0 3px 10px 1px rgba(0, 0, 0, 0.16);
  display: flex;
  align-items: center;
  z-index: 20;

  .tab_bar_item {
    flex: 1;
    padding: 2px 0;
    text-align: center;
    transition: all 0.5s;
    border-radius: 30px;
    position: relative;
  }
}
.tab_bar_occupy {
  height: 60px;
  width: 100%;
}
.hover_bar {
  background-color: rgba(236, 253, 255, 0.5);
}
.gaussian {
  backdrop-filter: blur(10px);
  background-color: transparent !important;
}
</style>
